<template>
	<view class="" style="width: 100vw;height: 100vh">
		<!-- <view  style="min-height: 100vh">
			<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<!-- <image class="mart_bg" src="/static/detail/detail_bg.png" mode="scaleToFill"></image> -->
			<hx-navbar title="山把火" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>

			<view class="container">
				<view class="collect_img_box">

					<view v-if="ktheme != 'purple'" style="width:100%;height: 700rpx;">
						<view class=""
							style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;">
							<image src="/static/index/details/lowercover.png"
								style="width:100%;height: 100%;display: inline-block;"></image>
						</view>
						<view
							style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;margin-top: -700rpx;">
							<!-- <img  :src="info.image" style="width:57%;height:57%;margin-left: 1.5%;" > -->
							<img src="/static/login/logo.png" style="width:57%;height:57%;margin-left: 1.5%;">
						</view>
					</view>
					<view v-else class="" style="z-index: -10;">

						<view class="animal-box">
							<view class="ani-list">
								<uni-view class="ani-info2 r1">
									<img class="an-image2" src="/static/login/logo.png" alt="Your Image">
								</uni-view>

								<uni-view class="ani-info2 r1-bg"></uni-view>
								<uni-view class="ani-info r2"></uni-view>

								<uni-view class="ani-info2 r3-bg">
									<image class="an-image2" src="@/static/aipicture/zfsl_back.png" alt="Your Image">
								</uni-view>
								<uni-view class="ani-info r4"></uni-view>
								<uni-view class="ani-info r5"></uni-view>
								<uni-view class="ani-info r6"></uni-view>

							</view>

						</view>
						<!-- <view class="animal-box" v-if="ifformat==='gif'">
					<image :src="info.image" mode="aspectFill" class="collect_image">
					</image>
			
				</view> -->
					</view>

				</view>
				<view class="c_name">
					<view class="c_left">
						<image src="/static/user/jiantou_left_black.png" mode=""></image>
					</view>
					<view class="c_con" style="margin: 0 10rpx;">
						山把火
					</view>
					<view class="c_right">
						<image src="/static/user//jiantou_right_black.png" mode=""></image>
					</view>
				</view>
				<view class="c_hd">
					活动时间：2024年3月1日-2024年12月31日
				</view>
				<view class="" style="width:100%;height: 400rpx;">
					<view class=""
						style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;">
						<image src="/static/user/back_fj.png" :class="{'animation':ifresolve}" class="gq_class"></image>
						<view class="fj_image">
							<image class="fj_img" src="@/static/user/invite_img.png" mode="widthFix"></image>
						</view>
					</view>
					<view
						style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;margin-top: -400rpx;">
						<!-- <img  :src="info.image" style="width:57%;height:57%;margin-left: 1.5%;" > -->
						<!-- <img src="/static/login/logo.png" style="width:37%;height:37%;margin-left: 1.5%;"> -->
					</view>
				</view>
				<!-- 分解光圈 -->
				<view class=""  style="width: 90%;display: flex;justify-content: center;margin: 10rpx auto;">
					<view class="" v-for="item in list" v-if="ifresolve" :class="{'anim_xgq':ifresolve}">
						<view class="" style="position: relative;">
							<image src="/static/user/back_guangquan.png"   style="width: 200rpx;height:200rpx;" mode="">
							</image>
							<view class=""
								style="width: 130rpx;height: 130rpx;;position: absolute;color: red;top: 20%;left: 20%">
								<image src="/static/user/ronglu.png" style="width: 98%;height: 98%;" mode="">
								</image>
							</view>
						</view>
					</view>


				</view>
				<view class="c_hd"> 集齐以上材料即可进行分解 </view>
				<view class="c_hd" :style="{color:ktopicAdaptationColors}">去购买分解材料
					<image src="@/static/free/jiantuo_purple.png" class="gf_image" v-if="ktheme == 'purple'" mode="">
					</image>
					<image src="@/static/free/jiantou_black.png" class="gf_image" v-if="ktheme == 'black'" mode="">
					</image>
					<image src="@/static/free/jiantuo_purple.png" class="gf_image" v-if="ktheme == 'purple'" mode="">
					</image>
					<image src="@/static/free/jiantou_black.png" class="gf_image" v-if="ktheme == 'black'" mode="">
					</image>
				</view>
			</view>
			<view v-if="item.content" :class="[ktheme != 'purple'?'cont-box_black':'cont-box']">
				<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#BBDC69':'#000')}">
					版权权益
				</view>
				<!-- <image class="article_tilte" src="/static/detail/title1.png" mode="widthFix"></image> -->
				<view class="content_box borradius">
					<jshopContent :content="item.content" v-if="item.content"></jshopContent>
				</view>
				<view style="height: 120rpx;"></view>
				<view class="foot" :style="{background:ktabbarBgColor}">

					<view class="btn" :style="{background:kbuttonBgColor}" @tap="go_resolve()">分解</view>

					<!-- <view class="btn" @tap="go_give()" :style="{background:kbuttonBgColor}">立即转赠</view> -->
				</view>

			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import jshopContent from '@/components/jshop/jshop-content.vue' //视频和文本解析组件
	import paypass from '@/components/pay_pass/pay_pass.vue' //视频和文本解析组件
	import xwCountDown from '@/components/xw-CountDown'

	export default {
		components: {
			jshopContent,
			paypass,
			xwCountDown
		},
		data() {
			return {
				ifresolve: false,
				item: {},
				info: '',
				list: [{
					id: 1,
					Image: '/static/without.png'
				}, {
					id: 2,
					Image: '/static/without.png'
				}, {
					id: 3,
					Image: '/static/without.png'
				}],
				id: '1756011292312051714'
			}
		},
		onLoad() {
			console.log("加载中--")
			this.$api.getCollectionDetails(this.id, res => {
				console.log("this.info --1-", res)
				if (res.status) {
					this.info = res.data;
					console.log("this.info --1-", this.info)

					this.$api.getGoodsDetails(res.data.iid, res => {
						this.item = res.data
						console.log("this.item -1--", this.item)
					})
				}
			})
		},
		methods: {
			go_resolve() {
				this.ifresolve=true
			}
		}
	}
</script>

<style lang="scss">
	@import "@/pages/index/detail.scss";

	// 3D
	.animal-box {
		-webkit-perspective: 800;
		-webkit-transform-style: preserve-3d;
		perspective: 800;
		transform-style: preserve-3d;
		position: relative;
		width: 503rpx;
		height: 503rpx;
		margin: 13rpx auto;


	}

	.ani-list {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		-webkit-transform: rotateY(-50deg);
		-webkit-transform-style: preserve-3d;
		transform: rotateY(271deg); //rotateY(-50deg);
		transform-style: preserve-3d;
		-webkit-transform-origin: center;
		transform-origin: center;
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		animation: rotate 15s infinite linear;
		border-radius: 43rpx;

	}



	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		border: 5rpx solid #ff3936;
	}

	.animal-box .ani-list .r1-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;
		-webkit-transform: translateZ(27rpx); //14px
		transform: translateZ(27rpx);
		background-color: #dddedf;
	}

	.animal-box .ani-list .r2 {
		top: 21rpx;
		// transform: rotateY(90deg) translateZ(248px) translateX(-13px); 
		//14px
		transform: rotateY(90deg) translateZ(492rpx) translateX(-26rpx); //-26rpx
		transform-origin: left;
		// transform: rotateY(90deg) translateZ(245px) translateX(0px);

		width: 50rpx;
		// height: 220px8
		height: 450rpx;

	}

	.animal-box .ani-list .r4 {
		// top: 20px;
		top: 20rpx;
		//28px
		-webkit-transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		//10px
		transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		width: 52rpx;

		// height: 230px;

		height: 450rpx;
	}

	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		// border: 5rpx solid #ff3936;
		border: 5rpx solid #673DE7;
	}

	.animal-box .ani-list .r3-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;

		-webkit-transform: rotateY(180deg) translateZ(27rpx); //14px
		transform: rotateY(180deg) translateZ(27rpx);
		background-color: #dddedf;
		border: 5rpx solid #673DE7; //red
	}

	.ani-info2 {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 56rpx;
	}

	.animal-box .ani-list .ani-info {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 16rpx;
	}

	.animal-box .ani-list .r5 {
		left: 20rpx;
		top: 16rpx;

		-webkit-transform: rotateX(90deg) translateZ(22rpx); //11px
		transform: rotateX(90deg) translateZ(22rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	.animal-box .ani-list .r6 {
		left: 20rpx;
		top: -25rpx;
		//	-webkit-transform: rotateX(-90deg) translateZ(236px);
		transform: rotateX(-90deg) translateZ(472rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	// 	.animal-box .ani-list .r1 .an-image, .animal-box .ani-list .r3 
	.an-image {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		padding: 30rpx;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {

			border-radius: 50rpx;
		}
	}

	.an-image2 {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {}
	}

	.animal-box .ani-list .r1 {
		-webkit-transform: translateZ(30rpx); //15px
		transform: translateZ(30rpx);
	}

	.c_name {
		display: flex;
		justify-content: center;
		color: white;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 34rpx;

		image {
			width: 70rpx;
			height: 25rpx;
			margin: 0 10rpx;
		}
	}

	.c_hd {
		margin: 30rpx auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		// line-height: 40rpx;
		text-align: center;
		font-style: normal;
	}

	.gf_image {
		padding-left: 10rpx;
		width: 16rpx;
		height: 24rpx;
	}

	.cont-box {
		width: 100%;
		height: auto;
		background: rgba(255, 255, 255, .9);
		border-radius: 20rpx;
		border: 1rpx solid #DCDCDC;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.cont_size {
		color: #2a2a2a;
		font-size: 31rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.cont-box_black {
		width: 100%;
		height: auto;
		background: #000;
		border-radius: 20rpx;
		// border: 1rpx solid #DCDCDC;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.gq_class {
		width: 402rpx;
		height: 396rpx;
		display: inline-block;
		position: relative;
	
	}

	//分解动画
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.animation {
		animation: rotate 5s ;
		   animation-iteration-count: 1; /* 动画执行次数，设置为1表示只执行一次 */  
	}

	.fj_image {
		position: absolute;
		color: red;
		left: 36%;
		width: 210rpx;
		height: 230rpx;
		.fj_img {
			width: 100%;
		}
	}
	
	//小动画光圈
	//分解动画
	@keyframes animRotate {
		 0% {  
		        opacity: 0; /* 初始状态为完全透明 */  
		    }  
			50% {
			       opacity: 0.5; /* 初始状态为完全透明 */  
			   }
		    100% {  
		        opacity: 1; /* 结束状态为完全不透明 */  
		    }  
	}
	.anim_xgq{
		  
		  
		    animation-iteration-count: 1; /* 动画执行次数，设置为1表示只执行一次 */  
		    /* 其他动画属性，如timing-function等 */
		animation: animRotate 3s ;
	}
</style>